<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>豆瓣改版</title>
        <style media="screen">
            /* 全局 */
            body {
                margin: 0;
                font-size: 50px;
            }
            /* 顶栏导航 */
            .navigation {
                width: 100%;
                background-color: #a63f5d;
                position: fixed;
                z-index: 5;
                display: flex;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
            }
            .navigation a {
                flex:1;
                text-align: center;
                text-decoration: none;
                color: white;
                padding: 10px;
            }
            /* 标题 */
            .top {
                background-color: #ffc0cb;
                width:100%;
                overflow: auto;
            }
            .top_title {
                padding-top: 90px;
                padding-left: 30px;
                font-size: 90px;
                font-weight: 900;
                margin-top: 50px;

            }
            .top p {
                color: white;
                padding-left: 30px;
                padding-bottom: 30px;
                font-size: 40px;
            }
            /* 代码链接部分 */
            .code {
                width:33%;
                margin-left: 62%;
                margin-top: 20px;
                margin-bottom: 20px;
                background-color: #ff9900;
                border-radius:35px;
                height:70px;
                text-align: center;
            }
            .code a {
                text-decoration: none;
                color: white;
                padding-left: 20px;
            }
            /* 小标题 */
            .title_back {
                background-color: #ff9933;
                width: 10%;
                height: 70px;
                position: relative;
                left: -5%;
                border-radius: 16px;
            }
            .title_name {
                position: relative;
                top:-70px;
                font-weight: 600;
                font-size: 60px;
                line-height: 70px;

            }
            .titleSecond {
                margin-top: 30px;
                margin-bottom: -60px;;
            }

            /* 背景 */
            .simple_intro {
                margin: 2%;
                padding: 2%;
                width:91%;
                border-radius: 20px;
                background-color: #9ae3ad;
            }
            .back_title {

                font-weight: 700;
                font-size: 75px;
            }
            .background_content {
                margin: 2%;
                padding: 2%;
                width:91%;
                border-radius: 20px;
                border: 5px solid #9ae3ad;
            }
            .back_solution {
                margin-top: 5%;
                padding: 2%;
                width: 95%;
                border-radius: 20px;
                background: pink;
                font-weight: 550;
            }


        </style>
        <!-- 轮播图 -->
        <link rel="stylesheet" href="js/swiper-master/package/swiper-bundle.min.css">
        <style media="screen">
        .swiper-container {
            width: auto;
            height:auto;
        }
        .swiper-slide {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
        .swiper-slide img {
            width: 90%;
        }
        </style>
    </head>
    <body>
        <!-- 顶栏 -->
        <div class="navigation">
            <a href="http://www.yueqingyang.ink/second_4">上一个</a>
            <a href="http://www.yueqingyang.ink/">首页</a>
            <a href="http://www.yueqingyang.ink/fourth">下一个</a>
        </div>
        <!-- 标题 -->
        <div class="top">
            <div class="top_title">
                豆瓣“共同爱好”改版
            </div>
            <p>--在分众文化背景下，发现共识和同伴</p>
        </div>
        <!-- 码云链接 -->
        <div class="code">
            <a href="https://gitee.com/yue-qingyang/portfolio-project">代码细节></a>
        </div>
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                1 设计背景
            </div>
        </div>
        <div class="simple_intro">

        </div>
        <div class="background_box">

        </div>
        <br>
        <!-- 细节 2.1 -->
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                2 设计细节--布局
            </div>
        </div>
        <div class="img1">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <!-- 细节 2.2 -->
        <br>
        <br>
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                2 设计细节--话题筐
            </div>
        </div>
        <div class="img2">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <br>
        <br>
        <br>


        <!-- 轮播图 -->
        <script src="js/swiper-master/package/swiper-bundle.min.js"></script>
        <script>
            var mySwiper = new Swiper
             ('.swiper-container', {
                loop: false, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        </script>
        <!-- 请求数据 -->

        <script type="text/javascript">
            function g(Class) {
                var x = document.getElementsByClassName(Class);
                return x[0];
            }
            //创建一个 ajax 对象
            // 参数是一个请求
            var ajax = function(request) {
                // request “请求”是一个对象，有以下属性
                // method:请求方法，string
                // url: 请求路径, string
                // data: 发送的请求数据(非GET方法), string
                // callback: 处理请求的回调函数, function
                var r = new XMLHttpRequest()
                r.open(request.method, request.url, true)
                //内容类型
                if (request.contentType !== undefined) {
                    r.setRequestHeader('Content-Type', request.contentType)
                }
                r.onreadystatechange = function(event) {
                    if(r.readyState === 4) {
                        request.callback(r.response)
                    }
                }
                // 判断是get要数据，还是post发数据
                if (request.method === "GET") {
                    r.send()
                } else {
                    r.send(request.data)
                }
            }
            // 插入simple
            var insertSimple = function(contents) {

                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var content = b.content
                    var inserthtml = `
                        ${content}
                    `
                    var div = g("simple_intro")
                    div.innerHTML = inserthtml
                }
            }
            var getSimple = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/3/simple",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertSimple(temp)
                    }
                }
                ajax(request)
            }
            // 插入background
            var insertBackground = function(contents) {
                html = ""
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var title = b.title
                    var name = b.name
                    var content = b.content
                    var inserthtml = `
                    <div class="background_content">
                        <div class="back_problem">
                            <div class="back_title">
                                ${title}
                            </div>
                            ${name}
                        </div>
                        <div class="back_solution">
                            ${content}
                        </div>
                    </div>
                    `
                    var div = g("background_box")
                    html += inserthtml
                }
                div.innerHTML = html
            }
            var getBackground = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/3/background",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertBackground(temp)
                    }
                }
                ajax(request)
            }

            // 插入img
            var insertImg = function(contents, goal) {
                var html = ''
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var name = b.name
                    var content = b.content
                    var inserthtml = `
                    <div class="swiper-slide">
                        <p>${name}</p>
                        <img src="${content}" alt="">
                    </div>
                    `
                    html += inserthtml
                }
                var div = g(goal)
                var div2 = div.children[0]
                var div3 = div2.children[0]
                div3.innerHTML = html
            }

            // 插入 img1
            var getImg1 = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/3/img1",
                    contentType: "application/json",
                    callback: function(response) {
                        var goal = "img1"
                        var temp = JSON.parse(response)
                        insertImg(temp, goal)
                    }
                }
                ajax(request)
            }
            var getImg2 = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/3/img2",
                    contentType: "application/json",
                    callback: function(response) {
                        var goal = "img2"
                        var temp = JSON.parse(response)
                        insertImg(temp, goal)
                    }
                }
                ajax(request)
            }


            getSimple()
            getBackground()
            getImg1()
            getImg2()


        </script>
    </body>
</html>
